<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>export page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <div th:include="common :: common-jquery"></div>
    <div th:include="common :: common-bootstrap"></div>
</head>
<body>
<div  th:id="container" >

    <div class="row">
        <div class="col-md-4 col-sm-4"></div>
        <div class="col-md-4 col-sm-4">
            <h2>文件导出0</h2>
            <form class="container container-small" id="formId1" action="return false;" th:action="@{/poi/exportExcel}" method="get">
                <div class="form-group">
                    <input type="text" name="orgCode" id="orgCodeId" value="1234">
                </div>
                <button type="submit" class="btn btn-primary">导出</button>
            </form>
        </div>
        <div class="col-md-4 col-sm-4"></div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4"></div>
        <div class="col-md-4 col-sm-4">
            <h2>文件导出1</h2>
            <form class="container container-small" id="formId2" action="return false;" enctype="multipart/form-data">
                <div class="form-group">
                    <input type="text" name="name" id="nameId">
                </div>
                <button type="button" class="btn btn-primary" th:onclick="ajaxSubmit()">导出</button>
            </form>
        </div>
        <div class="col-md-4 col-sm-4"></div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4"></div>
        <div class="col-md-4 col-sm-4">
            <h2>文件导出2</h2>
            <form class="container container-small" id="formId3" action="return false;" enctype="multipart/form-data">
                <button type="button" class="btn btn-primary" th:onclick="ajaxSubmit3()">导出</button>
            </form>
        </div>
        <div class="col-md-4 col-sm-4"></div>
    </div>

    <script type="text/javascript" th:inline="javascript">

        function ajaxSubmit(){
            var data = $("#formId1").serialize();
            var name = $("#nameId").val();

            console.log(JSON.stringify(data));
            //console.log(JSON.parse(data));
            // console.log($.parseJSON(data));

            const json = {"name": name};
            console.log(json);
            console.log(JSON.stringify(json));
            //console.log(JSON.parse(json));
            console.log(JSON.parse(JSON.stringify(json)));
            JSON.parse(JSON.stringify(json), function (key, value) {
                console.log(`key:${key}, value:`, value);
            })

            var url = "http://localhost:8060/poi/excelTemplate"
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("get", url, true);
            xmlhttp.responseType = 'blob';
            xmlhttp.setRequestHeader("responseType", "blob");
            xmlhttp.setRequestHeader("Content-Type", "application/json");
            xmlhttp.send(JSON.stringify(json));
        }


        function ajaxSubmit3(){
            const data = {'fields': ['userName','name','age','sex','mobile']};
            const json = JSON.parse(JSON.stringify(data));
            console.log(json);
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open('post', 'http://localhost:8060/poi/excelTemplate1', true);
            xmlhttp.responseType = 'blob';
            xmlhttp.setRequestHeader("responseType", "blob");
            xmlhttp.setRequestHeader("Content-Type", "application/json");
            xmlhttp.send(JSON.stringify(json));
        }

    </script>

</div>
</body>
</html>
